<template lang='pug'>
.tech_card(:style="stylePanel")
    .tech_content
        //- .tech_corn_tl(:style="styleCorn('top','left')")
        //- .tech_corn_tr(:style="styleCorn('top','right')")
        //- .tech_corn_bl(:style="styleCorn('bottom','left')")
        //- .tech_corn_br(:style="styleCorn('bottom','right')")
        .tech_head
            slot(name='header') {{title}}
        .tech_content_area
            slot(name='content') 内容xxxx
</template>
<script>
export default {
    props:{
        title:{default:'标题'},
        bkColor:{default:'rgba(125,125,125,0.5)'},
        color:{default:'rgb(255, 234, 152)'},
    },
    computed:{
        stylePanel(){
            return {
                background:this.bkColor
            }
        },
        styleline(){
            return {background:`linear-gradient(90deg,
                ${this.bkColor} 0%,
                ${this.color} 20%,
                rgba(255,255,255,1) 50%,
                ${this.color} 80%,
                ${this.bkColor} 100%)`}
        }
    },
    methods:{
        styleCorn(tb,lr){
            let style={}
            style[`border-${lr}-color`]=this.color
            style[`border-${tb}-color`]=this.color
            style[`border-${tb}-${lr}-radius`]='8px'
            return style
        },
        
    }
}
</script>
<style lang="scss" scoped>
.tech_head{
    height: 40px;
    line-height: 40px;
    font-size: 26px;
}
.tech_split{
    width: 60%;
    height: 1px;
    margin: 5px auto;
    margin-top: 0px;
    // background: linear-gradient(0,
    // rgba(255, 234, 152,1) 0%,
    // rgba(255,255,255,1) 50%,
    // rgba(255, 234, 152,1) 100%,);
}
.tech_panel{
    height: 100%;
    width: 100%;
    position:absolute;
    color:white;
    text-align: center;
}
.tech_content{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: hidden;
}
.tech_corn_tl,
.tech_corn_tr,
.tech_corn_bl,
.tech_corn_br{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border:2px solid transparent;
}
.tech_corn_tl{
    top:-1px;
    left: -1px;
}
.tech_corn_tr{
    top:-1px;
    right: -1px;
}
.tech_corn_bl{
    bottom: -1px;
    left: -1px;
}
.tech_corn_br{
    bottom: -1px;
    right: -1px;
}
</style>